<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ include file="/WEB-INF/views/common/taglibs.jsp" %>
<%@ include file="/WEB-INF/views/common/head.jsp" %>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <title>超盟金服</title>
    <link rel="stylesheet" type="text/css" href="${webRoot}static/app/theme.css?t=188"/>
    <link rel="stylesheet" type="text/css" href="${webRoot}static/app/css/ed2.css"/>
    <script type="text/javascript" src="${webRoot }static/js/jquery/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="${webRoot }static/common/layer_mobile/need/layer.css"/>
    <script type="text/javascript" src="${webRoot }static/common/layer_mobile/layer.js"></script>
    <style>
        .right-con {
            height: calc(100vh - 50px);
        }

        .num-price {
            position: absolute;
            top: 8px;
            right: 2px;
            width: 24px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            border-radius: 16px;
            font-size: 8px;
            font-weight: 700;
            color: #fff;
            background: #06a550;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .4);
            display: none;
        }

    </style>
</head>

<body>
<div>
    <div id="info-bar">
        <div class="shop-info"><img class="shop-info_logo"
                                    src="${webRoot}static/img/logo2.png"
                                    lazy="error"> <span class="shop-info_name"></span></div>
        <div class="operation-btns"> <!----> <i
                class="operation-icon fn-icon"></i></div>
    </div>
    <div id="jump-page" style="display:none;"><i class="jump-triangle"></i>
        <div class="page-class" onclick="orderHistoryt()">历史订单</div>
        <%--<div class="page-class">个人中心</div>--%>
    </div>
    <div class="main">
        <div class="left-menu">
            <ul>

                <li class="active">全部<span class="num-price">4</span></li>
                <%--<li>酒水饮料</li>--%>
                <c:forEach items="${foodTypeList}" var="foodType" varStatus="status">
                    <li left-typeid="${foodType.typeid}"> ${foodType.typename}<span class="num-price"></span></li>
                </c:forEach>

            </ul>
        </div>
        <div class="con">

            <div class="right-con con-active">
                <ul>
                    <c:forEach items="${foodList}" var="food">
                        <li data-id="${food.fid}" data-style="all">
                            <div class="menu-img"><img src="${webRoot}static/${food.picurl}" width="55"
                                                       height="55"/>
                            </div>
                            <div class="menu-txt">
                                <h4>${food.foodname} ${food.feature}</h4>
                                <p class="list1">月售：${food.sales}</p>
                                <p class="list2">
                                    <b>￥${food.foodprice}</b>
                                <div class="btn">
                                    <button class="minus" minus-id="${food.fid}" data-style="${food.typeid}">
                                        <strong></strong>
                                    </button>
                                    <i>0</i>
                                    <button class="add" add-id="${food.fid}" data-style="${food.typeid}">
                                        <strong></strong>
                                    </button>
                                    <i class="price">${food.foodprice}</i>
                                </div>
                                </p>
                            </div>
                        </li>
                    </c:forEach>

                </ul>
            </div>

            <c:forEach items="${foodTypeList}" var="foodType" varStatus="status">
                <div class="right-con">
                    <ul>
                        <c:forEach items="${foodList}" var="food">
                            <c:if test="${food.typeid== foodType.typeid}">
                                <li data-id="${food.fid}" data-style="${foodType.typeid}">
                                    <div class="menu-img"><img src="${webRoot}static/${food.picurl}"
                                                               width="55"
                                                               height="55"/></div>
                                    <div class="menu-txt">
                                        <h4>${food.foodname} ${food.feature}</h4>
                                        <p class="list1">月售：${food.sales}</p>
                                        <p class="list2">
                                            <b>￥${food.foodprice}</b>
                                        <div class="btn">

                                            <button class="minus" minus-id="${food.fid}"
                                                    data-style="${food.typeid}">
                                                <strong></strong>
                                            </button>
                                            <i>0</i>
                                            <button class="add" add-id="${food.fid}" data-style="${food.typeid}">
                                                <strong></strong>
                                            </button>
                                            <i class="price">${food.foodprice}</i>
                                        </div>
                                        </p>
                                    </div>
                                </li>
                            </c:if>
                        </c:forEach>
                    </ul>
                </div>
            </c:forEach>
        </div>
        <div class="footer">
            <div class="left">已选：
                <span id="cartN">
			<span id="totalcountshow">0</span>份　总计：￥<span id="totalpriceshow">0</span></span>元
            </div>
            <div class="right">
                <a id="btnselect" class="xhlbtn  disable" href="javascript:void(0)"
                   onclick="javascript:void(0)">去结算</a>
            </div>
        </div>
    </div>
    <div id="selected">

    </div>
</div>
<script type="text/javascript">
    function orderHistoryt() {
        window.location.href = '${webRoot}index/history?openId=${openId}';
    }

    function submitOrder() {

        var loading = layer.open({type: 2});

        var res = new Object();
        var arrProduct = new Array();
        $("#selected").find("input").each(function () {
            var product = new Object();
            var num = $(this).attr("data-num")
            if (num != 0) {
                product.fid = $(this).attr("id");
                product.num = $(this).attr("data-num");
                arrProduct.push(product)
            }
        })
        res.data = JSON.stringify(arrProduct)
        res.openId = '${openId}'
        res.totalcount = $("#totalcountshow").html();
        res.totalprices = $("#totalpriceshow").html();
        console.log(JSON.stringify(res));

        $.ajax({
            type: "POST",
            url: '${webRoot }app/generating_order',
            contentType: "application/json",
            data: JSON.stringify(res),
            dataType: "json",
            success: function (data) {
                console.log(data)
                if (data.result) {
                    layer.close(loading);
                    <%--window.location.href = '${webRoot}index/pay?orderid=' + data.data.orderid + '&openId=${openId}';--%>
                    window.location.href = '${webRoot}hjpay?orderid=' + data.data.orderid + '&openId=${openId}';
                } else {

                    layer.open({
                        content: '生成订单错误'
                        , btn: '确定'
                    });
                }
            }
        });

    }

    $(function () {
        $(".operation-icon").click(function () {
            $("#jump-page").toggle();//显示div
        })
        //加的效果
        $(".add").click(function () {
            var id = $(this).attr("add-id");
            $('button[add-id=' + id + ']').each(function () {
                $(this).prevAll().css("display", "inline-block");
                var n = $(this).prev().text();
                var num = parseInt(n) + 1;
                selectedProduct(id, num, $(this).attr("data-style"))
                if (num == 0) {
                    return;
                }
                $(this).prev().text(num);

            })
            var danjia = $(this).next().text();//获取单价
            var a = $("#totalpriceshow").html();//获取当前所选总价
            $("#totalpriceshow").html((a * 1 + danjia * 1).toFixed(2));//计算当前所选总价

            var nm = $("#totalcountshow").html();//获取数量
            $("#totalcountshow").html(nm * 1 + 1);
            jss();//<span style='font-family: Arial, Helvetica, sans-serif;'></span>   改变按钮样式
//            debugger;


        });
        //减的效果
        $(".minus").click(function () {
            var id = $(this).attr("minus-id");
            var num = 0
            $('button[minus-id=' + id + ']').each(function () {


                var n = $(this).next().text();
                num = parseInt(n) - 1;
                selectedProduct(id, num, $(this).attr("data-style"))
                $(this).next().text(num);//减1
                if (num <= 0) {
                    $(this).next().css("display", "none");
                    $(this).css("display", "none");
                }
            });
            var danjia = $(this).nextAll(".price").text();//获取单价
            var a = $("#totalpriceshow").html();//获取当前所选总价
            $("#totalpriceshow").html((a * 1 - danjia * 1).toFixed(2));//计算当前所选总价
            var nm = $("#totalcountshow").html();//获取数量
            $("#totalcountshow").html(nm * 1 - 1);
            //如果数量小于或等于0则隐藏减号和数量
            if (num <= 0) {
                jss();//改变按钮样式
                return
            }
        });
        function jss() {
            var m = $("#totalcountshow").html();
//            debugger
            if (m > 0) {
                $(".right").find("a").removeClass("disable");
                $(".right").find("a").attr("onclick", "submitOrder()");
            } else {
                $(".right").find("a").addClass("disable");
                $(".right").find("a").attr("onclick", "javascript:void(0)");
            }
        };

        function selectedProduct(fid, num, type) {
            if ($('input[id=' + fid + ']').length > 0) {
                //元素存在时执行的代码
                $('input[id=' + fid + ']').attr("data-num", num);
                $('input[id=' + fid + ']').attr("data-type", type);
            } else {
                $("#selected").append('<input id="' + fid + '" type="hidden" data-type="' + type + '" data-num="' + num + '" />')
            }
            var aa = $('li[left-typeid=' + type + ']').find('span[class="num-price"]');
            aa.html(num);
            if (num == 0) {
                aa.css("display", "none");
            } else {
                aa.css("display", "inline-block");
            }
        }

        //选项卡
        $(".con>div").hide();
        $(".con>div:eq(0)").show();

        $(".left-menu li").click(function () {

//            console.log(this)

            var type = $(this).attr("data-typeid");

            $(this).addClass("active").siblings().removeClass("active");
            var n = $(".left-menu li").index(this);
            $(".left-menu li").index(this);
            $(".con>div").hide();

            $(".con>div:eq(" + n + ")").show();

        });
    });
</script>

</body>
</html>
